<template>
<div>
  <div class="DetailContent"  v-for="item of list" :key="item.id">
    <div class="detail-photo">
      <img :src="item.imgUrl" alt="">
    </div>
    <div class="detail-item">
      <div class="detail-price">
        <em>￥</em>
        <b>{{item.price}}</b>
      </div>
      <div class="detail-title">{{item.title}}</div>
    </div>
    <div class="detail-footer">
      <b>优惠</b>
      <span>换购</span>
      <p>购买1件商品可换购热销产品</p>
    </div>
  </div>

</div>
</template>

<script>
export default {
  name: "DetailContent",
  data(){
    return{
      list:[
        {id:'001',price:'3.99', imgUrl:require('@/assets/images/zhr.png'),title:'幸福草莓鸡蛋西红柿500g'},
        {id:'002',price:'3.99', imgUrl:require('@/assets/images/zhugu.png'),title:'幸福草莓鸡蛋西红柿500g'},
        {id:'003',price:'3.99', imgUrl:require('@/assets/images/xia.png'),title:'幸福草莓鸡蛋西红柿500g'},
        {id:'004',price:'3.99', imgUrl:require('@/assets/images/tu.jpg'),title:'幸福草莓鸡蛋西红柿500g'}
      ]
    }
  },
  mounted() {
    this.id = this.$route.query.id
    if (this.id === '001'){
      this.list=[
        {id:'001',price:'3.99', imgUrl:require('@/assets/images/zhr.png'),
          title:'幸福草莓鸡蛋西红柿500g'},
      ]

    }
    if (this.id === '002'){
      this.list=[
        {id:'002',price:'3.99', imgUrl:require('@/assets/images/zhugu.png'),title:'幸福草莓鸡蛋西红柿500g'},

      ]

    }
    if (this.id === '003'){
      this.list=[
        {id:'003',price:'3.99', imgUrl:require('@/assets/images/xia.png'),title:'幸福草莓鸡蛋西红柿500g'},

      ]

    }
    if (this.id === '004'){
      this.list=[
        {id:'004',price:'3.99', imgUrl:require('@/assets/images/tu.jpg'),title:'幸福草莓鸡蛋西红柿500g'}

      ]

    }

  }

}
</script>

<style scoped lang="scss">
.DetailContent{
  height: 500px;
  background-color: #32AAA9;
  .detail-photo{
    height: 300px;
  }
  .detail-photo img{
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  .detail-item{
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    height: 50px;
    background-color: gold;
    .detail-title{
      margin-top: 3px;
    }
  }
  .detail-footer{
    display: flex;
    align-items: center;
  }
  .detail-footer b{
    margin-left: 10px;
  }
  .detail-footer span{
    margin-left: 10px;
  }
  .detail-footer p{
    margin-left: 10px;
  }
}


</style>